<template>
    <div class="components_lists">
      <div class="lists-slider">
        <h1>组件列表</h1>
        <ul>
          <router-link v-for="(list,index) in lists" @click.native="link_to(list.link)" :key="index" tag="li" :to="list.link">
            {{index+1}}、{{list.label}}
          </router-link>
        </ul>
      </div>
      <div class="slider-content">
        <router-view></router-view>
      </div>
    </div>
</template>
<style lang="less" scoped type="text/less">
  .components_lists {
    height: 100%;
    /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar{
      width: 8px;
      height: 10px;
      background-color: #f5f5f5;
    }
    /*定义滚动条的轨道，内阴影及圆角*/
    ::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);
      border-radius: 6px;
      background-color: #f5f5f5;
    }
    /*定义滑块，内阴影及圆角*/
    ::-webkit-scrollbar-thumb{
      height: 20px;
      width: 6px;
      border-radius: 6px;
      -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);
      background-color: #aaa;
    }
    .lists-slider {
      float: left;
      width: 400px;
      box-sizing: border-box;
      border-right: 2px solid #ccc;
      height: 100%;
      text-align: center;
      h1 {
        font-size: 30px;
        margin-bottom: 20px;
      }
      li {
        font-size: 18px;
        text-align: left;
        box-sizing: border-box;
        padding-left: 10px;
        line-height: 40px;
        cursor: pointer;
      }
    }
    .slider-content {
      margin-left: 400px;
      height: 100%;
    }
  }
</style>
<script>
  export default {
    name: 'components_lists',
    data () {
      return {
        lists: [
          {
            label: 'select选择组件',
            link: 'm_select'
          },
          {
            label: 'button按钮组件',
            link: 'm_button'
          },
          {
            label: 'checkbox按钮组件',
            link: 'm_checkbox'
          },
          {
            label: 'CSS魔法的一些记录',
            link: 'm_style'
          },
          {
            label: 'img',
            link: 'm_fater'
          },
          {
            label: '3D视觉',
            link: 'm_3d'
          },
          {
            label: '弹框',
            link: 'm_popover'
          },
          {
            label: 'table',
            link: 'm_table'
          },
          {
            label: 'css面试',
            link: 'm_css'
          },
          {
            label: '测试代码用',
            link: 'm_example'
          },
        ],
      }
    },
    methods: {
      link_to (val) {
        console.log(3333)
        //this.$router.push(val);
      }
    },
    mounted () {
      function kk(a, b) {
         function mm (n) {
           let l = arguments.length;
           return l
         }
         return mm
      }
      let vv = kk(1,2);
      console.log(vv(3))
      /*function genStaticKeys (modules) {
        return modules.reduce((keys, m) => {
          return keys.concat(m.staticKeys || [])
        }, []).join(',')
      }
      console.log(genStaticKeys([1,2,3,4,5]))*/
    }
  }
</script>
